<template>
  <div class="es-tooltip_content">
    <es-tooltip
      :tooltip="'左悬浮提示'"
      position="left"
      color="red"
      backgroundColor="green"
    >
      <es-button>左悬浮提示</es-button>
    </es-tooltip>
    <es-tooltip :tooltip="'上悬浮提示'" position="top">
      <es-button>上悬浮提示</es-button>
    </es-tooltip>
    <es-tooltip :tooltip="'下悬浮提示'" position="bottom">
      <es-button>下悬浮提示</es-button>
    </es-tooltip>
    <es-tooltip :tooltip="'右悬浮提示'" position="right">
      <es-button>右悬浮提示</es-button>
    </es-tooltip>
  </div>
</template>

<style scoped>
.es-tooltip_content {
  height: 400px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
</style>
